
// Services Section 01
.services-area2{
    @extend %overlay4;
    .single-cat{
        box-shadow: 0px 10px 16px rgba(84, 0, 0,.06);
        padding: 50px 36px 39px 36px;
        border: 1px solid rgba(255, 255, 255,.2);
        @include transition(.4s);
        z-index: 1;
        @media #{$sm}{
             margin-bottom: 40px;
        }
        @media #{$xs}{
             margin-bottom: 30px;
        }
        .cat-icon{
            img{
                margin: 0 auto;
                margin-bottom: 30px;

                position: relative;
                top: 0px;
                @include transition(.4s);
            }
        }
        .cat-cap{
            span{
                color: #ffff;
                font-size: 22px;
                font-weight: 500;
                margin-bottom: 15px;
                display: block;
            }
            h5{
             & > a{
                font-size: 22px;
                font-weight: 500;
                margin-bottom: 14px;
                display: block;
                color: #ffff;
                line-height: 1.4;
                @include transition(.2s);

                @media #{$lg}{
                    font-size: 18px;
                }
                @media #{$sm}{
                    font-size: 21px;
                }
                @media #{$xs}{
                    font-size: 23px;
                }
              }
            }
            p{
                color: #7F85A8;
                font-size: 16px;
                @include transition(.2s);
                line-height: 1.6;
                @media #{$sm}{
                    font-size: 15px;

                }
            }
            a{
                color: #1c165c;
                font-size: 16px;
                font-weight: 600;
                @include transition(.2s);
            }
            input{
                padding: 10px 29px;
                width: 100%;
                height: 45px;
                margin-bottom: 12px;
                color: #725F5F;
                border: 1px solid #A80000;
                text-align: center;
            }
        }
        // Hover Effect In single 
        &:hover{
            background: rgba(255, 255, 255,.06);
            border: 1px solid transparent;
            .cat-icon{
                img{
                    position: relative;
                    top: -5px;
                }
            }
            .cat-cap{
                h5{
                    color: #000;
                }
            }
       }
       &.single-cat2{
        height: 375px;
        padding: 41px 25px 64px 25px;
        @media #{$xs}{
            height: 408px;
        }

       }
    }
}


// Services Section 02
.categories-area {
    .single-cat{
        background:#fff;
        border-radius: 0px;
        padding: 40px 21px;
        @include transition(.4s);
        position: relative;
        z-index: 1;
        border-radius: 5px;
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 0;
            // background:#ff3d1c;
            @extend %overlay2;
            transition: .6s;
            bottom: 0;
            left: 0;
            z-index: -1;
            border-radius: 5px;
        }
        .cat-icon{
            color: $theme-color;
            font-size: 50px;
            margin-bottom: 30px;
            display: block;
            margin-bottom: 50px;

            width: 120px;
            height: 120px;
            background:#fff;
            line-height: 100px;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0px 15px 25px rgba(0, 4, 74,.04);
            img{

            }
        }
        .cat-cap{
            h5{
             & > a{
                 color: $heading-color;
                font-size: 26px;
                font-weight: 600;
                margin-bottom: 21px;
                display: block;
                @include transition(.2s);
                @media #{$sm}{
                    font-size: 21px;
                }
                @media #{$xs}{
                    font-size: 21px;
                }
              }
            }
            p{
                margin-bottom: 36px;
                color: #3F4854;
                font-size: 16px;
                @include transition(.2s);
                margin: 0;
                @media #{$sm}{
                    font-size: 15px;

                }
            }
            a{
                color: #1c165c;
                font-size: 16px;
                font-weight: 600;
                @include transition(.2s);
            }
        }


        // Hover Effect In single 
        &:hover{
            -webkit-box-shadow: 0 20px 30px rgba(35, 47, 85,.1);
            &::before {
                height: 100%;
            }
            .cat-icon{
            span{
                background:#fff;
            }
            }
            .cat-cap{
                h5{
                    color: #fff;
                }
                p{
                    color: #fff;
                }
                a{
                    color: #fff;
                }
            }
       }
    }
}
